<template>
  <el-table :load="state.loading" :data="state.tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
    tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
    <slot name='column'></slot>
  </el-table>
  <!--总数超过一页，再展示分页器-->
  <div class="pages">
    <div class="page_wrap">
      <span class="page_span1">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
          :page-sizes="[10, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
          :total="state.tableData.length">
        </el-pagination>
      </span>
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance, ref } from 'vue'
import axios from 'axios'
const currentPage = ref(1)
const pageSize = ref(10)

const handleSizeChange = (val) => {
  console.log(`每页 ${val} 条`);
  currentPage.value = 1;
  pageSize.value = val;
}

const handleCurrentChange = (val) => {
  console.log(`当前页: ${val}`);
  currentPage.value = val;
}
const props = defineProps({
  action: String
})

const state = reactive({
  loading: false,
  tableData: [], // 数据列表

  multipleSelection: []
})
onMounted(() => {
  getList()
})

const getList = () => {
  state.loading = true
  axios.post('http://localhost:8080/user/findAllUser'
  ).then(res => {
    state.tableData = res.data
    state.loading = false

  })
}

const handleSelectionChange = (val) => {
  state.multipleSelection = val
}

// script setup 写法，需要通过 defineExpose 方法，将属性暴露出去，才能在父组件通过 ref 形式拿到本组件的内部参数
defineExpose({ state: state, getList: getList })
</script>